import React from 'react'
import ReactDatePicker, {registerLocale} from 'react-datepicker'
import ru from 'date-fns/locale/ru'
import {FormGroupLabel} from '../FormGroupLabel'

registerLocale('ru', ru)

interface DatePickerProps {
  id: string
  name: string
  label?: string
  placeholder?: string
  value: any
  minDate?: Date
  maxDate?: Date
  required?: boolean
  disabled?: boolean
  onChange: (value: Date) => any
  className?: string
  size?: 'sm' | 'lg'
  yearDropdownItemNumber?: number
  dateFormat?: string
  showTimeSelect?: boolean
  showTimeSelectOnly?: boolean
  timeIntervals?: number
  minTime?: Date
  maxTime?: Date
  onKeyDown?: (e: any) => void
  filterDate?: (date: Date) => boolean
  filterTime?: (time: Date) => boolean
  excludeDates?: Date[]
  excludeTimes?: Date[]
  includeDates?: Date[]
  includeTimes?: Date[]
  helpText?: React.ReactNode
  isDisabledKeyboard?: boolean
  feedback?: string
  isClearable?: boolean
  saveLSKeyId?: string
}

const DatePicker: React.FC<DatePickerProps> = ({
  size,
  className,
  onChange,
  disabled,
  maxDate,
  minDate,
  value,
  label,
  name,
  id,
  required,
  placeholder,
  yearDropdownItemNumber,
  dateFormat,
  showTimeSelect,
  showTimeSelectOnly,
  timeIntervals,
  maxTime,
  minTime,
  onKeyDown,
  filterDate,
  filterTime,
  excludeDates,
  excludeTimes,
  includeDates,
  includeTimes,
  helpText,
  isDisabledKeyboard,
  feedback,
  isClearable,
  saveLSKeyId,
}): React.ReactElement => {
  const getMaxDate = (maxDate: Date): Date => {
    if (maxDate) {
      return maxDate
    } else {
      const date = new Date()
      return new Date(date.setMonth(date.getMonth() + 12))
    }
  }

  const getInputPadding = () => {
    switch (size) {
      case 'sm':
        return 'sm '
      default:
        return 'lg '
    }
  }

  const localOnChange = (date: any) => {
    if (saveLSKeyId && date) {
      localStorage.setItem(saveLSKeyId, JSON.stringify(date))
      onChange(date)
    } else {
      onChange(date)
    }
  }

  const getValue = () => {
    if (saveLSKeyId) {
      const savedValue: any = JSON.parse(localStorage.getItem(saveLSKeyId))
      if (savedValue) {
        value = savedValue
      }
    }
    if (value === 0 || value === null || value === undefined) {
      value = null
    } else {
      value = new Date(value)
    }
    return value
  }

  return (
    <FormGroupLabel
      feedback={feedback}
      label={label}
      className={className}
      isRequired={required}
      helpText={helpText}>
      <ReactDatePicker
        clearButtonTitle={'Очистить'}
        isClearable={isClearable}
        disabledKeyboardNavigation={isDisabledKeyboard}
        id={id}
        name={name}
        selected={getValue()}
        dateFormat={dateFormat ? dateFormat : 'dd.MM.yyyy'}
        required={required}
        disabled={disabled}
        showMonthDropdown
        showYearDropdown
        showTimeSelect={showTimeSelect ? showTimeSelect : false}
        showTimeSelectOnly={showTimeSelectOnly ? showTimeSelectOnly : false}
        timeIntervals={timeIntervals}
        showPopperArrow={false}
        locale={'ru'}
        wrapperClassName={'date-picker-wrapper ' + (size === 'sm' ? 'date-sm ' : 'date-lg ')}
        className={'input w-100 outline-none ' + getInputPadding()}
        placeholderText={placeholder}
        onInputClick={() => {}}
        autoComplete={'off'}
        dropdownMode={'scroll'}
        scrollableYearDropdown
        yearDropdownItemNumber={yearDropdownItemNumber ? yearDropdownItemNumber : 50}
        minDate={minDate}
        maxDate={getMaxDate(maxDate)}
        minTime={minTime ? minTime : null}
        maxTime={maxTime ? maxTime : null}
        onChange={(date: Date) => {
          localOnChange(date)
        }}
        onKeyDown={
          onKeyDown
            ? (e) => {
                onKeyDown(e)
              }
            : () => {}
        }
        filterDate={filterDate}
        // @ts-ignore
        filterTime={filterTime}
        excludeDates={excludeDates}
        excludeTimes={excludeTimes}
        includeDates={includeDates}
        includeTimes={includeTimes}
      />
    </FormGroupLabel>
  )
}

export {DatePicker}
